// 静态属性，样式属性，剥离数据 多种屏幕尺寸都事先部署好
// import echarts from 'echarts'
const staticOption = {
  tooltip: {
    trigger: 'item'
  },
  grid: {
    right: '8%',
    top: '15%',
    left: '5%',
    bottom: '5%',
    containLabel: true
  },
  xAxis: {
    name: '秒',
    nameTextStyle: {
      color: '#94aad4',
      fontSize: 14
    },
    splitNumber: 8,
    max: 40,
    splitLine: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: '#4876c7',
        width: 2
      }
    },
    axisLabel: {
      color: '#94aad4',
      fontSize: 14
    }
  },
  yAxis: {
    name: '正确率',
    max: 100,
    nameTextStyle: {
      color: '#94aad4',
      fontSize: 14
    },
    splitLine: {
      lineStyle: {
        color: '#05388f',
        opacity: 0.5
      }
    },
    axisLine: {
      lineStyle: {
        color: '#4876c7',
        width: 2
      }
    },
    axisLabel: {
      color: '#94aad4',
      fontSize: 14,
      formatter: function (value) {
        return value + '%'
      }
    }
  },
  graphic: {
    elements: [
      {
        type: 'group',
        left: '14%',
        top: '10%',
        children: [
          {
            type: 'image',
            style: {
              width: 30,
              height: 30,
              image: '/static/weishidataview/images/lion.png'
            }
          },
          {
            type: 'text',
            style: {
              text: '狮子型',
              fill: '#fb6c84',
              fontSize: 16,
              x: 40,
              y: 5
            }
          }
        ]
      },
      {
        type: 'group',
        right: '11%',
        top: '10%',
        children: [
          {
            type: 'image',
            style: {
              width: 30,
              height: 30,
              image: '/static/weishidataview/images/cow.png'
            }
          },
          {
            type: 'text',
            style: {
              text: '黄牛型',
              fill: '#ffdd89',
              fontSize: 16,
              x: 40,
              y: 5
            }
          }
        ]
      },
      {
        type: 'group',
        left: '14%',
        bottom: '15%',
        children: [
          {
            type: 'image',
            style: {
              width: 30,
              height: 30,
              image: '/static/weishidataview/images/monkey.png'
            }
          },
          {
            type: 'text',
            style: {
              text: '猴子型',
              fill: '#25bdff',
              fontSize: 16,
              x: 40,
              y: 5
            }
          }
        ]
      },
      {
        type: 'group',
        right: '11%',
        bottom: '15%',
        children: [
          {
            type: 'image',
            style: {
              width: 40,
              height: 30,
              image: '/static/weishidataview/images/sloth.png'
            }
          },
          {
            type: 'text',
            style: {
              text: '树懒型',
              fill: '#87ff52',
              fontSize: 16,
              x: 50,
              y: 5
            }
          }
        ]
      }
    ]
  },
  series: [ {
    type: 'scatter',
    symbolSize: 12,
    data: [],
    markLine: {
      symbol: 'none',
      silent: true,
      data: [
        {
          type: 'average',
          name: 'y平均值',
          symbol: 'none',
          lineStyle: {
            type: 'solid',
            color: '#4876c7'
          },
          label: {
            show: false
          }
        },
        {
          type: 'average',
          name: 'x平均值',
          symbol: 'none',
          valueIndex: 0,
          lineStyle: {
            type: 'solid',
            color: '#4876c7'
          },
          label: {
            show: false
          }
        }
      ]
    }
  }]
}

const staticOptionMid = {
  tooltip: {
    trigger: 'item'
  },
  grid: {
    right: '8%',
    top: '15%',
    left: '5%',
    bottom: '5%',
    containLabel: true
  },
  xAxis: {
    splitNumber: 8,
    max: 40,
    splitLine: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: '#4876c7',
        width: 2
      }
    },
    axisLabel: {
      color: '#94aad4',
      fontSize: 14
    }
  },
  yAxis: {
    name: '正确率',
    max: 100,
    nameTextStyle: {
      color: '#94aad4',
      fontSize: 14
    },
    splitLine: {
      lineStyle: {
        color: '#05388f',
        opacity: 0.5
      }
    },
    axisLine: {
      lineStyle: {
        color: '#4876c7',
        width: 2
      }
    },
    axisLabel: {
      color: '#94aad4',
      fontSize: 14,
      formatter: function (value) {
        return value + '%'
      }
    }
  },
  graphic: {
    elements: [
      {
        type: 'group',
        left: '18%',
        top: '10%',
        children: [
          {
            type: 'image',
            style: {
              width: 24,
              height: 24,
              image: '/static/weishidataview/images/lion.png'
            }
          },
          {
            type: 'text',
            style: {
              text: '狮子型',
              fill: '#fb6c84',
              fontSize: 14,
              x: 30,
              y: 5
            }
          }
        ]
      },
      {
        type: 'group',
        right: '11%',
        top: '10%',
        children: [
          {
            type: 'image',
            style: {
              width: 24,
              height: 24,
              image: '/static/weishidataview/images/cow.png'
            }
          },
          {
            type: 'text',
            style: {
              text: '黄牛型',
              fill: '#ffdd89',
              fontSize: 14,
              x: 30,
              y: 5
            }
          }
        ]
      },
      {
        type: 'group',
        left: '18%',
        bottom: '15%',
        children: [
          {
            type: 'image',
            style: {
              width: 24,
              height: 24,
              image: '/static/weishidataview/images/monkey.png'
            }
          },
          {
            type: 'text',
            style: {
              text: '猴子型',
              fill: '#25bdff',
              fontSize: 14,
              x: 30,
              y: 5
            }
          }
        ]
      },
      {
        type: 'group',
        right: '11%',
        bottom: '15%',
        children: [
          {
            type: 'image',
            style: {
              width: 30,
              height: 24,
              image: '/static/weishidataview/images/sloth.png'
            }
          },
          {
            type: 'text',
            style: {
              text: '树懒型',
              fill: '#87ff52',
              fontSize: 14,
              x: 35,
              y: 5
            }
          }
        ]
      }
    ]
  },
  series: [ {
    type: 'scatter',
    symbolSize: 12,
    data: [],
    markLine: {
      symbol: 'none',
      silent: true,
      data: [
        {
          type: 'average',
          name: 'y平均值',
          symbol: 'none',
          lineStyle: {
            type: 'solid',
            color: '#4876c7'
          },
          label: {
            show: false
          }
        },
        {
          type: 'average',
          name: 'x平均值',
          symbol: 'none',
          valueIndex: 0,
          lineStyle: {
            type: 'solid',
            color: '#4876c7'
          },
          label: {
            show: false
          }
        }
      ]
    }
  }]
}

const staticOptionSmall = {
  tooltip: {
    trigger: 'item'
  },
  grid: {
    right: '8%',
    top: '15%',
    left: '5%',
    bottom: '5%',
    containLabel: true
  },
  xAxis: {
    splitNumber: 8,
    max: 40,
    splitLine: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: '#4876c7',
        width: 2
      }
    },
    axisLabel: {
      color: '#94aad4',
      fontSize: 14
    }
  },
  yAxis: {
    name: '正确率',
    nameTextStyle: {
      color: '#94aad4',
      fontSize: 14
    },
    splitLine: {
      lineStyle: {
        color: '#05388f',
        opacity: 0.5
      }
    },
    axisLine: {
      lineStyle: {
        color: '#4876c7',
        width: 2
      }
    },
    axisLabel: {
      color: '#94aad4',
      fontSize: 14,
      formatter: function (value) {
        return value + '%'
      }
    }
  },
  graphic: {
    elements: [
      {
        type: 'group',
        left: '18%',
        top: '10%',
        children: [
          {
            type: 'image',
            style: {
              width: 24,
              height: 24,
              image: '/static/weishidataview/images/lion.png'
            }
          },
          {
            type: 'text',
            style: {
              text: '狮子型',
              fill: '#fb6c84',
              fontSize: 14,
              x: 30,
              y: 5
            }
          }
        ]
      },
      {
        type: 'group',
        right: '11%',
        top: '10%',
        children: [
          {
            type: 'image',
            style: {
              width: 24,
              height: 24,
              image: '/static/weishidataview/images/cow.png'
            }
          },
          {
            type: 'text',
            style: {
              text: '黄牛型',
              fill: '#ffdd89',
              fontSize: 14,
              x: 30,
              y: 5
            }
          }
        ]
      },
      {
        type: 'group',
        left: '18%',
        bottom: '15%',
        children: [
          {
            type: 'image',
            style: {
              width: 24,
              height: 24,
              image: '/static/weishidataview/images/monkey.png'
            }
          },
          {
            type: 'text',
            style: {
              text: '猴子型',
              fill: '#25bdff',
              fontSize: 14,
              x: 30,
              y: 5
            }
          }
        ]
      },
      {
        type: 'group',
        right: '11%',
        bottom: '15%',
        children: [
          {
            type: 'image',
            style: {
              width: 24,
              height: 24,
              image: '/static/weishidataview/images/sloth.png'
            }
          },
          {
            type: 'text',
            style: {
              text: '树懒型',
              fill: '#87ff52',
              fontSize: 14,
              x: 30,
              y: 5
            }
          }
        ]
      }
    ]
  },
  series: [ {
    type: 'scatter',
    symbolSize: 12,
    itemStyle: {
      color: '#06bacd'
    },
    data: [],
    markLine: {
      symbol: 'none',
      silent: true,
      data: [
        {
          type: 'average',
          name: 'y平均值',
          symbol: 'none',
          lineStyle: {
            type: 'solid',
            color: '#4876c7'
          },
          label: {
            show: false
          }
        },
        {
          type: 'average',
          name: 'x平均值',
          symbol: 'none',
          valueIndex: 0,
          lineStyle: {
            type: 'solid',
            color: '#4876c7'
          },
          label: {
            show: false
          }
        }
      ]
    }
  }]
}

// 获取设备宽度
const screen = window.screen.width

class ChartFactory {
  constructor (additionalOptions) {
    // 根据屏幕宽度获取不同配置的echarts配置
    this.option = staticOption
    if (screen < 1920 && screen > 1200) {
      this.option = staticOptionMid
    }
    if (screen === 1024) {
      this.option = staticOptionSmall
    }
    // 下方复制属于浅拷贝，指向同个内存，针对可能有更改的需求，要进行一次清理
    this.clear()
    additionalOptions.seriesData.forEach((p1) => {
      this.option.series[0].data.push({
        value: p1,
        itemStyle: {
          color: this.chooseZone(p1)
        }
      })
    })
  }
  chooseZone (value) {
    let colors = ['#fb6c84', '#ffdd89', '#25bdff', '#87ff52']
    if (value[0] >= 20) {
      if (value[1] <= 50) {
        return colors[3]
      } else if (value[1] >= 50 && value[1] <= 100) {
        return colors[1]
      }
    } else if (value[0] < 20 && value[0] >= 0) {
      if (value[1] <= 50) {
        return colors[2]
      } else if (value[1] > 50 && value[1] <= 100) {
        return colors[0]
      }
    }
  }
  // 清理方法，要将部署的新数据全部置空
  clear () {
    this.option.series[0].data = []
  }

  getOption () {
    return this.option
  }
}

export { ChartFactory }
